<template>
  <div class="person-info">
    <x-header @on-click-back="$router.push('/home')" :left-options="{preventGoBack:true}">完善个人信息</x-header>
    <div class="img-box">
      <div class="con-box">
        <avatar backgroundColor="#B79E74" color="#ffffff" :size="80" :src="form.avatar" username="Avatar"></avatar>
        <input type="file" ref="uploadImg" @change="handleUpload($event)" class="upload" accept="image/gif,image/jpeg,image/png,image/jpg">
        <span class="tips">设置头像</span>
      </div>
    </div>
    <group>
      <x-input title="昵称" v-model="form.nickname" placeholder="请输入昵称">
        <!-- <i class="icon-yanzhengma register-icon" slot="label" style="padding-right:10px;display:block;"></i> -->
      </x-input>
      <datetime :min-year="1900"
        :max-year="new Date().getFullYear()"
        v-model="form.birthday"
        title="生日"
        placeholder="请选择生日">
        <!-- <i class="icon-shengribirthday16 register-icon" slot="title" style="padding-right:10px;display:block;"></i> -->
      </datetime>
      <popup-radio title="性别" :options="options1" v-model="form.gender"></popup-radio>
    </group>
    <div class="btn-box">
      <span style="background:#EFA79B;color:#ffffff;" class="next-step" @click="handleNextStep">下一步</span>
    </div>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { XInput, Group, XImg, XHeader, Datetime, PopupRadio } from 'vux';
import Avatar from 'vue-avatar';
import Uploader from 'vux-uploader';
import { namespace } from 'vuex-class';
import { upload } from '../../api/'
const IndexStore = namespace('home');

@Component({
  components: { XInput, Group, XImg, Avatar, XHeader, Datetime, Uploader, PopupRadio }
})
export default class PersonInfo extends Vue {
  @IndexStore.Action getUpload
  @IndexStore.Action getUpdateUserInfo
  @IndexStore.State upload
  @IndexStore.State updateUserInfo
  options1 = ['男', '女']
  form = {
    avatar: '',
    birthday: null,
    nickname: '',
    gender: '男'
  }
  userInfo = (localStorage.getItem('loginInfo') && JSON.parse(localStorage.getItem('loginInfo')).user) || ''
  genderList = [
    { icon: 'icon-nan', name: '男' },
    { icon: 'icon-nv', name: '女' }
  ]
  uploadUrl = upload
  handleUpload (e) {
    let file = e.target.files[0];
    // let imgSize = file.size / 1024;
    // if (imgSize > 200) {
    //   this.$vux.toast.text('请上传大小不要超过200KB的图片', 'middle');
    // } else {
    let formData = new FormData();
    formData.append('img', file);
    this.getUpload(formData).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.$set(this.form, 'avatar', this.upload.url)
      }
    });
    // }
  }
  handleNextStep () {
    let flag = true
    const { birthday, nickname } = this.form
    if (!birthday) {
      flag = false
      this.$vux.toast.text('请选择出生日期', 'middle')
    }
    if (!nickname) {
      flag = false
      this.$vux.toast.text('请输入昵称', 'middle')
    }
    if (flag) {
      this.saveUserInfo()
    }
  }
  saveUserInfo (flag) {
    const { avatar, birthday, nickname, gender } = this.form
    this.getUpdateUserInfo({avatar, birthday, nickname, gender}).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        localStorage.setItem('loginInfo', JSON.stringify(this.updateUserInfo))
        this.$router.push({
          path: '/schoolinfo',
          query: {
            personInfo: this.form
          }
        })
      }
    })
  }
  mounted () {
    this.isEditor = !!this.$route.query
    if (this.userInfo) {
      this.form = {
        avatar: this.userInfo.avatar,
        birthday: this.userInfo.birthday,
        nickname: this.userInfo.nickname,
        gender: this.userInfo.gender
      }
    }
  }
}
</script>
<style lang="less">
  .person-info {
    height: calc(100% - 50px);
    width: 100%;
    background: #ffffff;
    padding-top: 46px;
    .weui-cell__hd {
      padding-left: 10px;
    }
    .vux-datetime {
      margin-left: 10px;
    }
    .register-icon {
      font-size: 24px;
      padding-left: 10px;
    }
    .tips {
      // font-size: 12px;
      padding-top: 5px;
      color:#abbac1;
    }
    .gender-box {
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        color: #666666 !important;
      }
      span {
        margin-left: 5px;
        // font-size: 12px;
        color: #666666;
      }
    }
    .gender-active {
      i {
        color: #efa79b !important;
      }
      span {
        font-size: 24px !important;
        color: #efa79b;
      }
    }
    .upload {
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
      width: 80px;
      height: 80px;
      border: none;
    }
    .weui-uploader__input-box {
      margin: 0 !important;
    }
    .btn-box {
      margin: 30px 0;
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: center;
      .next-step {
      // border: 1px solid #999999;
        border-radius: 40px;
        font-size: 14px;
        width: 80%;
        text-align: center;
        padding: 10px 0;
      }
    }
    .img-box {
      padding-top: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .con-bot {
        width: 50%;
        margin: 20px 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
        i {
          font-size: 40px !important;
        }
      }
      .con-box {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .set-avatar {
          // font-size: 12px;
          margin-top: 10px;
        }
      }
    }
  }
</style>
